import { _decorator, Component, Label, Node, tween, Tween, UITransform } from 'cc';
import { PoolFactory } from './PoolFactory';
import { autoComp, autoNode } from '../Manager/BaseManager';
const { ccclass, property, menu } = _decorator;

@ccclass('HpProgressBar')
@menu('myComponent/HpProgressBar')
export class HpProgressBar extends Component {
  @property(PoolFactory)
  poolFactory: PoolFactory = null!;
  @property
  hpPiece: string = '';
  @property
  shieldPiece: string = '';
  /** 每一格代表的血量 */
  @property
  hpSpace: number = 1;

  @autoComp(UITransform)
  uiTransform: UITransform;
  @autoNode()
  hpMask: Node;
  @autoComp(UITransform, 'hpMask')
  hpMaskUi: UITransform;
  @autoNode()
  shieldMask: Node;
  @autoComp(UITransform, 'shieldMask')
  shieldMaskUi: UITransform;
  @autoComp(Label)
  hpLab: Label;
  hpMax: number = 0;
  shield: number = 0;

  init(hpMax: number, $hp?: number, $shield?: number) {
    this.changeMaxHp(hpMax);
    const hp = $hp || hpMax;
    const shield = $shield || 0;
    this.hpMaskUi.width = (hp / hpMax) * this.uiTransform.width;
    const temp = shield / hpMax;
    this.shieldMaskUi.width = (temp > 1 ? 1 : temp) * this.uiTransform.width;
    // this.changeHp(hp);
    this.changeShield(shield);
  }

  changeMaxHp(hpMax: number) {
    this.hpMax = hpMax;
    const len = Math.ceil(this.hpMax / this.hpSpace);
    const ww = (this.hpSpace / this.hpMax) * this.uiTransform.width;
    let i = 0;
    for (; i < len; i++) {
      if (this.hpMask.children[i]) {
        this.hpMask.addChild(this.poolFactory.pop(this.hpPiece));
      }
      const node = this.hpMask.children[i];
      node.active = true;
      node.getComponent(UITransform).width = ww;
    }
    for (; i < this.hpMask.children.length; i++) {
      this.hpMask.children[i].active = false;
    }
  }

  changeHp(hp: number, next?) {
    Tween.stopAllByTarget(this.hpMaskUi);
    tween(this.hpMaskUi)
      .to(
        0.3,
        { width: (hp / this.hpMax) * this.uiTransform.width },
        {
          progress: (start: number, end: number, current: number): number => {
            if (current + this.shieldMaskUi.width > this.hpMaskUi.width) {
              this.shieldMask.setPosition(this.hpMaskUi.width - this.shieldMaskUi.width, 0);
            } else {
              this.shieldMask.setPosition(current, 0);
            }
            return current;
          },
        }
      )
      .call(() => {
        if (next) {
          next();
        }
      })
      .start();
  }

  changeShield(shield: number) {
    this.shield += shield || 0;
    if (this.shield < 0) {
      this.shield = 0;
    }
    const len = Math.ceil(this.shield / this.hpSpace);
    let ww: number;
    if (this.shield > this.hpMax) {
      ww = ((this.uiTransform.width * len * this.shield) / this.hpSpace) * len;
      this.shieldMaskUi.width = this.uiTransform.width;
    } else {
      ww = this.shieldMask.children[0].getComponent(UITransform).width;
      this.shieldMaskUi.width = (this.shield / this.hpSpace) * len * ww * len;
    }
    let i = 0;
    for (; i < len; i++) {
      if (this.shieldMask.children[i]) {
        this.shieldMask.addChild(this.poolFactory.pop(this.shieldPiece));
      }
      const node = this.shieldMask.children[i];
      node.active = true;
      node.getComponent(UITransform).width = ww;
    }
    for (; i < this.hpMask.children.length; i++) {
      this.hpMask.children[i].active = false;
    }
  }
}
